<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" onsubmit="return false;" >
    <input id=file type=file placeholder="select a file" />
</form>
<pre id=log></pre>
<script src="https://cdn.bootcss.com/spark-md5/3.0.0/spark-md5.js"></script>
<script>
    // 一个文件的MD5值是相同的，根据MD5值判断一个文件，比如：上传文件是对于同一个文件的处理
    var log=document.getElementById("log");
    document.getElementById("file").addEventListener("change", function() {
        var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                file = this.files[0],
                chunkSize = 2097152, // read in chunks of 2MB
                chunks = Math.ceil(file.size / chunkSize),
                currentChunk = 0,
                spark = new SparkMD5.ArrayBuffer(),
                frOnload = function(e){
                  //  log.innerHTML+="\nread chunk number "+parseInt(currentChunk+1)+" of "+chunks;
                    spark.append(e.target.result); // append array buffer
                    currentChunk++;
                    if (currentChunk < chunks)
                        loadNext();
                    else
                        log.innerHTML+="\n加载结束 :\n\n计算后的文件md5:\n"+spark.end()+"\n\n现在你可以选择另外一个文件!\n";
                },
                frOnerror = function () {
                    log.innerHTML+="\糟糕，好像哪里错了.";
                };
        function loadNext() {
            var fileReader = new FileReader();
            fileReader.onload = frOnload;
            fileReader.onerror = frOnerror;
            var start = currentChunk * chunkSize,
                    end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        };
 
        loadNext();
    });
</script>
 
</body>
</html>